{% extends "layout.html" %}
{% block title %}查看文件: {{ filename }}{% endblock %}

{% block head %}
<style>
    .view-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 200px); /* Adjust height based on navbar and padding */
    }
    .view-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    .view-header h1 {
        margin: 0;
        font-size: 1.8em;
        word-break: break-all;
    }
    .header-actions {
        display: flex;
        gap: 15px;
    }
    .action-btn {
        text-decoration: none;
        color: #fff;
        padding: 10px 18px;
        border-radius: 5px;
        font-size: 1em;
        transition: background-color 0.2s ease;
        border: none;
        cursor: pointer;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .back-btn { background-color: #6c757d; }
    .back-btn:hover { background-color: #5a6268; }
    .edit-btn { background-color: #ffc107; color: #333; }
    .edit-btn:hover { background-color: #e0a800; }
    .download-btn { background-color: #007bff; }
    .download-btn:hover { background-color: #0056b3; }

    .file-content {
        flex-grow: 1;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 20px;
        background-color: #fdfdfd;
        overflow: auto; /* Add scrollbars if content overflows */
    }
    .file-content pre {
        white-space: pre-wrap; /* Wrap long lines */
        word-wrap: break-word; /* Break long words */
        margin: 0; /* Remove default margin */
        font-size: 1.1em;
        line-height: 1.6;
    }
</style>
{% endblock %}

{% block content %}
<div class="view-container">
    <div class="view-header">
        <h1>{{ filename }}</h1>
        <div class="header-actions">
            <a href="{{ url_for('files') }}" class="action-btn back-btn">返回列表</a>
            <a href="{{ url_for('edit_file', filename=filename) }}" class="action-btn edit-btn">修改</a>
            <button id="download-btn" class="action-btn download-btn">复制下载链接</button>
        </div>
    </div>
    
    <div class="file-content">
        <pre><code>{{ content }}</code></pre>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.getElementById('download-btn').addEventListener('click', function() {
        const fileUrl = "{{ url_for('uploads_file', filename=filename, _external=True) }}";
        const button = this;
        const originalText = button.textContent;
        
        try {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(fileUrl).then(() => {
                    button.textContent = '已复制!';
                }, () => {
                    button.textContent = '复制失败';
                });
            } else {
                const textarea = document.createElement('textarea');
                textarea.value = fileUrl;
                textarea.style.position = 'fixed';
                textarea.style.left = '-9999px';
                document.body.appendChild(textarea);
                textarea.focus();
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                button.textContent = '已复制!';
            }
        } catch (err) {
            console.error('复制失败:', err);
            button.textContent = '复制失败';
        } finally {
            setTimeout(() => {
                button.textContent = originalText;
            }, 2000);
        }
    });
</script>
{% endblock %}